<template>
  <div class="card-box">
    <h3>当前库存情况</h3>
    <p>
      总库存：<b>{{ totalCount }}</b> 件， 西安：<b>{{
        $store.state.xian.count
      }}</b>
      件， 成都： <b>{{ chengdu }}</b> 件, 物流： <b>{{ express.length }}</b>
    </p>
    <button class="dark" @click="gotoPage('/deliver')">发货管理 >></button>
    &nbsp;
    <button class="dark" @click="gotoPage('/express')">物流管理 >></button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      // xianCount: 100,
      // chengduCount: 80,
      expressCount: 3,
    };
  },
  computed: {
    ...mapState({
      chengdu: (state) => state.chengdu.count,
      express: (state) => state.express.expressList,
    }),
    // 原名映射
    ...mapGetters(["totalCount"]),
    // totalCount() {
    // return this.xianCount + this.chengduCount;
    // }
  },
  methods: {
    // 跳转到指定页面
    gotoPage(to) {
      this.$router.push(to);
    },
  },
};
</script>
